<template>
  <div class="box">
        <backHeader title="我的收藏" :rightTitle="rightTitle?'删除':'取消'" :rightClick='this.delete'></backHeader>
        <div class="listBox" v-for='(item,index) in listBox' :key='index'>
            <img :src="item.isCheck?checkIcon:nocheckIcon" 
            alt="" class='check' 
            @click='checkClick(index)'
            v-if='!rightTitle'>
            <img :src="item.src" alt="" class='tickIcon'>
            <p>{{item.title}}</p>
        </div>  
        <div class='favorite-list-edit' v-if='!rightTitle'>
            <img :src="allCheck?checkIcon:nocheckIcon" class='editIcon' @click="editIconClick">
            <p class='editText'>全选</p>
            <div class='button' @click='toDelete'>确认删除</div>
        </div>
        <noData link='data'></noData>
  </div>
</template>

<script>
import backHeader from '../../components/backHeader'
import noData from '../../components/noData'
export default {
    components:{
       backHeader,noData
    },
    data(){
        return{
            rightTitle:true,
            allCheck:false,
            checkIcon:require('../../assets/images/icon/check.png'),
            nocheckIcon:require('../../assets/images/icon/nocheck.png'),
            listBox:[{
                src:require('../../assets/images/tickets/ctahk3.png'),
                isCheck:false,
                title:'一分快1'
            },{
                src:require('../../assets/images/tickets/ctahk3.png'),
                isCheck:false,
                title:'一分快2'
            },{
                src:require('../../assets/images/tickets/ctahk3.png'),
                isCheck:false,
                title:'一分快3'
            }]
        }
    },
    methods:{
        //顶部删除按钮
        delete(){
            this.rightTitle = !this.rightTitle
        },
        checkClick(index){
            this.listBox[index].isCheck = !this.listBox[index].isCheck
        },
        //全选按钮
        editIconClick(){
            this.allCheck = !this.allCheck
            this.listBox.forEach((item)=>{
                item.isCheck = this.allCheck;
            })
        },
        //删除所有
        toDelete(){
            this.listBox = this.listBox.filter((item)=>!item.isCheck);
            this.rightTitle = !this.rightTitle
        }
    }
}
</script>

<style lang="less" scoped>
.box{
    background-color:#fff;
    height:calc(100vh)
}
.listBox{
    width:100%;
    height:70px;
    display:flex;
    align-items: center;
    border-bottom: 1px solid #efefef;
    .tickIcon{
        width:53px;
        margin-left:10px;
    }
    .check{
        width:21px;
        margin-right:10px;
        margin-left:10px
    }
    p{
        margin-left:10px
    }  
}
.editIcon{
    width:21px;
    margin-right:10px;
    margin-left:10px
}
.favorite-list-edit {
    position: fixed;
    bottom: 0;
    height: 54px;
    box-shadow: 6.4px 0 5.3px rgba(0,0,0,.19);
    width: 100%;
    display:flex;
    align-items: center;
    .editText{
        color:#661dac;
        font-size:16px;
    }
    .button{
        width:90px;
        height:36px;
        border-radius: 20px;
        position:absolute;
        right:10px;
        background-color:#661dac;
        color:#fff;
        font-size:16px;
        text-align: center;
        line-height:36px;
    }
}
</style>